<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学习LayUI</title>
    <link rel="stylesheet" href="https://unpkg.com/layui-src@latest/dist/css/layui.css">    
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style rel="stylesheet" type="text/css">
        .layui-tab-title li:first-child > i { /* 首页标签不可关闭 */
            display: none;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header ">
        <div class="layui-logo">
            <i class="layui-icon" style="font-size: 26px; color: #1E9FFF;">&#xe857;</i> 管理系统
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item">
                <a href="">控制台</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="">控制台<span class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="">个人中心<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    束洋洋
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                    <dd><a href="">退出</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="left-menu">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><i class="layui-icon" style="margin-right: 5px">&#xe620;</i>系统管理</a>
                    <dl class="layui-nav-child">
                        <dd id="S001" name="./html/form.html"><a href="javascript:;">表单</a></dd>
                        <dd id="S002" name="./html/role.html"><a href="javascript:;">角色管理</a></dd>
                        <dd id="S003" name="./html/table.html"><a href="javascript:;">表格</a></dd>
                        <dd id="S004" name="./html/upload.html"><a href="javascript:;">上传图片</a></dd>
                        <dd id="S005" name="http://www.shuyangyang.com.cn"><a href="javascript:;">作者网站</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body" style="bottom: 0px;">
        <div style="padding-left: 15px">
            <!-- 内容主体区域 -->
            <div class="layui-tab" lay-allowClose="true" lay-filter="tab-switch">
                <ul class="layui-tab-title">
                    <li class="layui-this" >首页</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        首页
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer"><!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
</body>
</html>
<script type="text/javascript"> (function (w) { w.frontjsConfig = {token: '6706ad4eb6e56ab5efbab75d9742132e', behaviour: 9} })(window); </script> <script type="text/javascript" src="https://static.frontjs.com/dist/current/tracker.min.js" crossorigin="true"></script>
<script src="https://unpkg.com/layui-src@latest/dist/layui.js"></script>
<script type="module" src="./js/index.js"></script>
<script>
    let element,$;
    layui.use(['element','jquery'],function(){
        element = layui.element;
        $ = layui.jquery;
        //监听左侧菜单点击
        element.on('nav(left-menu)', function(elem){
            addTab({
                tabTitle: elem[0].innerText,
                tabUrl: elem[0].attributes[1].nodeValue,
                tabId: elem[0].id //选项卡标题的lay-id属性值
            });
        });
        //监听tab选项卡切换
        element.on('tab(tab-switch)', function(data){
            if(data.elem.context.attributes != undefined){
                var id = data.elem.context.attributes[0].nodeValue;
                layui.each($(".layui-nav-child"), function () {
                    $(this).find("dd").removeClass("layui-this");
                });
                $("#"+id).attr("class","layui-this");
            }
        });
    });

    /**
     * 新增tab选项卡
     * @param tabTitle 选项卡标题名称
     * @param tabUrl 选项卡链接的页面URL
     * @param tabId 选项卡id
     */
    function addTab(obj){
        if ($(".layui-tab-title li[lay-id=" + obj.tabId + "]").length) { // 如果已经存在则切换
            element.tabChange('tab-switch', obj.tabId);
        }else{ // 不存在则新增
            element.tabAdd('tab-switch', {
                title: obj.tabTitle,
                content: '<iframe src='+ obj.tabUrl +' width="100%" style="min-height: 500px;" frameborder="0" scrolling="auto" onload="setIframeHeight(this)"></iframe>', // 选项卡内容，支持传入html
                id: obj.tabId //选项卡标题的lay-id属性值
            });
            element.tabChange('tab-switch', obj.tabId); //切换到新增的tab上
        }
    }

    /**
     * ifrme自适应页面高度，需要设定min-height
     * @param iframe
     */
     function setIframeHeight(iframe) {
        if (iframe) {
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
                iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
            }
        }
    };
</script>